<template>
	<view>
		<uni-popup ref="storePopup" type="bottom" @change="changePop" :safeArea="false" :isMaskClick="isMaskClick">
			<view class="store-pop-content">
				<view class="title-row">
					<image :src="selected_item.imgSrc" style="height: 130rpx;" mode="heightFix">
					</image>
					<text>{{selected_item.name}}</text>
				</view>
				<view class="num-row">
					<view class="left">
						<uni-icons type="calendar" size="25"></uni-icons>
						<text>保质期</text>
					</view>
					<view class="right">
						<my-number-box :background="'#fff'" :value="selected_item.warrantTime" :min="1" :max="999"
							@change="changeDay" />
						<view class="unit-box">
							<text>天</text>
							<uni-icons type="bottom" color="#fff" size="20"></uni-icons>
						</view>
					</view>
				</view>
				<view class="num-row">
					<view class="left">
						<uni-icons type="tune" size="25"></uni-icons>
						<text>数量</text>
					</view>
					<view class="right">
						<my-number-box :background="'#fff'" :value="selected_item.num" :min="1" :max="999"
							@change="changeNum" />
						<view class="unit-box" style="border: 1px solid #e5e5e5;" @click="openUnitPop">
							<text>{{selected_item.unit}}</text>
							<uni-icons type="bottom" color="#b2b2b2" size="20"></uni-icons>
						</view>
					</view>
				</view>
				<view class="num-row">
					<view class="left">
						<uni-icons type="location" size="25"></uni-icons>
						<text>位置</text>
					</view>
					<uni-data-picker ref="picker" placeholder="请选择放置的位置" popup-title="请选择放置的位置" :localdata="dataTree"
						:modelValue="selected_item.location" :clearIcon="false" @change="onchange"
						@popupopened="popupopened" @popupclosed="popupclosed">
					</uni-data-picker>
				</view>
				<view class="btn-row">
					<button type="default" style="background-color: #fbaca3; color: #000;" @click="deleteDiy"
						v-if="cate_list[active].classification == '自定义'">删除</button>
					<button type="default" @click="storeOneItem">存入</button>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="unitPopup" type="bottom" :safeArea="false">
			<my-unit-pop :unit_val="unit_val" @change="unitChange" @close="closeUnitPop"></my-unit-pop>
		</uni-popup>

		<uni-popup ref="diyPopup" type="bottom" @change="changePop" :safeArea="false" :isMaskClick="isMaskClick">
			<my-diy-pop :dataTree="dataTree" @close="closeDiyPop" @popupclosed="popupclosed" @popupopened="popupopened">
			</my-diy-pop>
		</uni-popup>

		<view class="store-list-container">
			<!-- 左侧的滚动视图区域 -->
			<scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}" v-if="cate">
				<block v-for="(item, i) in cate_list" :key="i">
					<view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChanged(i)">
						{{item.classification}}
					</view>
				</block>
			</scroll-view>
			<!-- 右侧的滚动视图区域 -->
			<scroll-view class="right-scroll-view" scroll-y :scroll-top="scrollTop"
				:style="{height: wh + 'px','width':cate?'80%':'100%'}">

				<image src="../../static/empty_img/obj_empty.png" style="width: 100%;margin-top: 30%;" mode="widthFix"
					v-if="cate_obj_list.length==0"></image>

				<view class="item-list" v-if="cate_list[active].classification == '自定义'">
					<view class="item-box" hover-class="hover-item-box" v-for="(item, index) in cate_obj_list"
						:key="item.otId" @click="selectItem(item,index)">
						<image :src="item.imgSrc" mode="heightFix"></image>
						<text>{{item.name}}</text>
					</view>

					<uni-fab ref="fab" :pattern="{buttonColor: 'rgba(16, 174, 255,0.5)',
					iconColor: '#fff'}" :horizontal="'right'" :vertical="'bottom'" @fabClick="openDiyPop" />

				</view>

				<view class="item-list" v-else-if="cate_list[active].classification == '识图'">
					<!-- otId可能会重复，所以用index -->
					<view class="item-row" v-for="(item, index) in cate_obj_list" :key="index"
						@click="selectItem(item,index)">
						<view class="left">
							<image :src="item.imgSrc"
								style=" margin-left:10rpx; height:180rpx; width:180rpx; align-self: center;"
								mode="aspectFill"></image>

							<view class="desc">
								<text class="name-text">{{item.name}}</text>
								<view class="other-text">
									<text>保质期:{{item.warrantTime}}天</text>
									<text>{{item.location== '1-1' ? dataTree[0].text + "-" + dataTree[0].children[0].text : item.location[0].text + "-" + item.location[1].text}}</text>
								</view>
							</view>
						</view>
						<uni-icons type="trash" size="35" style="position: absolute;top: 20rpx; right: 10rpx;"
							color="#f53f3f" @tap.stop="removeItem(index)">
						</uni-icons>
						<view class="num-box">
							<uni-number-box ref="numbox" :value="item.num" :min="1" :max="999"
								@change="changeItemNum(index)" />
						</view>

					</view>
				</view>

				<view class="item-list" v-else>
					<view class="item-box" hover-class="hover-item-box" v-for="(item, index) in cate_obj_list"
						:key="item.otId" @click="selectItem(item,index)">
						<image :src="item.imgSrc" mode="heightFix"></image>
						<text>{{item.name}}</text>
					</view>
				</view>

				<view type="default" class="confirm-btn"
					v-if="store_list.length&&cate_list[active].classification == '识图'">
					<button type="default" @click="storeConfirm">确认</button>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "my-store-list",
		props: {
			fid: {

			},
			cate_list: {
				type: Array,
				default: []
			},
			wh: {
				default: 0
			},
			dataTree: {
				type: Array,
				default: []
			},
			detect_list: {
				type: Array,
				default: []
			},
			cate: {
				default: true
			},
		},

		data() {
			return {
				// 当前选中项的索引，默认让第一项被选中
				active: 0,
				// 滚动条距离顶部的距离
				scrollTop: 0,
				// 选择的物资
				selected_item: {
					// 保质期
					warrantTime: 1,
					// 取出数量
					num: 1,
					// 存放位置
					location: '1-1',
					// 单位
					unit: '份',
				},
				cate_obj_list: [],
				// 是否点击遮罩层关闭弹窗
				isMaskClick: true,
				// 点击item的索引
				index: 0,
				store_list: [],
				unit_val: [0],
			};
		},

		computed: {
			...mapState('object', ['unit_list'])
		},
		watch: {
			detect_list: {
				handler(newVal, oldVal) {
					this.store_list.push.apply(this.store_list, newVal)
					this.activeChanged(this.cate_list.length - 1)
					console.log(this.store_list);
				}
			},
			cate_list: {
				// 刷新用的
				handler(newVal, oldVal) {
					if (newVal.length === 1 || oldVal.length === 1)
						this.activeChanged(0)
				},
				deep: true
			}
		},

		mounted() {
			this.activeChanged(0)
		},

		methods: {

			// 跳转

			//请求
			storeConfirm() {
				// 深拷贝
				const temp = JSON.parse(JSON.stringify(this.store_list))
				temp.forEach(x => {
					x.location = x.location == '1-1' ? this.dataTree[0].text + "-" + this.dataTree[0]
						.children[0].text : x.location[0].text + "-" + x.location[1].text
				})
				const obj = {
					fid: this.fid,
					objectInfoList: temp
				}
				uni.$api.object.storeItem(obj)
				this.store_list = []
				this.cate_obj_list = []
			},

			storeOneItem() {
				// 单个存放
				this.selected_item.location = this.selected_item.location == '1-1' ? this.dataTree[0].text + "-" + this
					.dataTree[0]
					.children[0].text : this.selected_item.location[0].text + "-" + this.selected_item
					.location[1].text
				const obj = {
					fid: this.fid,
					objectInfoList: [this.selected_item]
				}
				uni.$api.object.storeItem(obj)
				this.$refs.storePopup.close()

				if (this.cate_list[this.active].classification == '识图')
					this.removeItem(this.index)
			},

			deleteDiy() {
				uni.$api.object.deleteDiy(this.selected_item.otId, this.index)
				uni.showLoading({
					mask: true
				})
				setTimeout(() => {
					this.activeChanged(this.active)
					uni.hideLoading()
				}, 500)
				this.$refs.storePopup.close()
			},

			// 事件处理
			// 选中项改变的事件处理函数
			activeChanged(i) {
				this.active = i
				// 让 scrollTop 的值在 0 与 1 之间切换
				this.scrollTop = this.scrollTop ? 0 : 1
				if (this.cate_list[i].classification == '识图') {
					this.cate_obj_list = this.store_list
				} else {
					this.cate_obj_list = this.cate_list[i].objectTypeList
				}
			},

			selectItem(obj, index) {
				this.selected_item = {
					...this.selected_item,
					...obj
				}
				if (obj.location != '1-1') {
					// 对设置了默认位置的物品进行映射
					let tempArr = obj.location.split('-')
					let temp = this.dataTree.find(({
						text
					}) => text == tempArr[0])
					this.selected_item.location = [{
						text: tempArr[0],
						value: temp.value
					}, {
						text: tempArr[1],
						value: temp.children.find(({
							text
						}) => text == tempArr[1]).value
					}]
				}
				// 用于修改识图列表的数据
				this.index = index
				this.$refs.storePopup.open()
			},

			// 滑动穿透的处理，子传父
			changePop(e) {
				this.$emit('changePop', e.show)
				if (!e.show) {
					// 弹窗修改识图结果后同步到UI
					if (this.cate_list[this.active].classification == '识图') {
						this.store_list[this.index].num = this.selected_item.num
						this.store_list[this.index].warrantTime = this.selected_item.warrantTime
						this.store_list[this.index].location = this.selected_item.location
						// this.store_list[this.index]={...this.store_list[this.index],...this.selected_item}
						this.cate_obj_list = this.store_list
					}
				}
			},

			// 删除识图结果
			removeItem(index) {
				this.store_list.splice(index, 1)
			},
			// 数量
			changeNum(value) {
				this.selected_item.num = value
			},
			// 修改识图结果数量
			changeItemNum(index) {
				// 要通过ref获取numbox的inputValue
				this.store_list[index].num = this.$refs.numbox[index].inputValue
			},
			// 保质期
			changeDay(value) {
				this.selected_item.warrantTime = value
			},
			// 位置
			onchange(e) {
				this.selected_item.location = e.detail.value
			},
			// 处理双层弹窗的遮罩层响应问题
			popupopened(e) {
				this.isMaskClick = false
			},
			popupclosed(e) {
				this.isMaskClick = true
			},
			// 单位弹窗
			unitChange(e) {
				this.selected_item.unit = this.unit_list[e[0]]
			},
			openUnitPop() {
				this.$refs.unitPopup.open()
				this.unit_val = [this.unit_list.indexOf(this.selected_item.unit)]
			},
			closeUnitPop() {
				this.$refs.unitPopup.close()
			},
			// 自定义物品弹窗
			openDiyPop() {
				this.$refs.diyPopup.open()
			},
			closeDiyPop(flag) {
				if (flag) {
					uni.showLoading({
						mask: true
					})
					setTimeout(() => {
						this.activeChanged(this.active)
						uni.hideLoading()
					}, 500)
				}
				this.$refs.diyPopup.close()
			},
		}
	}
</script>

<style lang="scss">
	.store-list-container {
		display: flex;

		.left-scroll-view {
			width: 20%;

			.left-scroll-view-item {
				line-height: 120rpx;
				background-color: #f2f3f5;
				text-align: center;
				font-size: 30rpx;

				// 激活项的样式
				&.active {
					background-color: #fff;
					color: #96c0fd;
					position: relative;

					// 渲染激活项左侧的指示边线
					&::before {
						content: ' ';
						display: block;
						width: 10rpx;
						height: 60rpx;
						background-color: #96c0fd;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}

		.right-scroll-view {
			background-color: #efefef;
			width: 80%;

			.item-list {
				display: flex;
				flex-wrap: wrap;
				padding: 0 5%;
				justify-content: space-between;
				padding-top: 20rpx;

				.item-box {
					font-size: 36rpx;
					background-color: #fff;
					display: flex;
					flex-direction: column;
					width: 47%;
					height: 250rpx;
					align-items: center;
					border-radius: 20rpx;
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;
					overflow: hidden;
					position: relative;

					>image {
						height: 220rpx;
						border-radius: 20rpx;
					}

					>text {
						position: absolute;
						width: 100%;
						text-align: center;
						bottom: 10rpx;
					}
				}

				.hover-item-box {
					background-color: #acacac;
				}

				.item-row {
					height: 200rpx;
					width: 100%;
					display: flex;
					background-color: #fff;
					margin-bottom: 20rpx;
					border-radius: 20rpx;
					align-items: center;
					position: relative;
					justify-content: space-between;

					.left {
						display: flex;
						width: 65%;
						overflow: hidden;

						.desc {
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							margin-left: 10rpx;
							height: 190rpx;
							flex: 1;

							.name-text {
								font-size: 40rpx;
							}

							.other-text {
								font-size: 20rpx;
								display: flex;
								flex-direction: column;
								color: #abb2bb;
							}
						}
					}

					.num-box {
						position: absolute;
						bottom: 25rpx;
						right: 20rpx;
					}
				}
			}

			.confirm-btn {
				height: 80rpx;
				padding: 0 5%;
				position: sticky;
				bottom: 3%;
				margin-top: 7%;
				z-index: 10;

				>button {
					background-color: #96c0fd;
					color: #fff;
					flex: 1;
				}
			}
		}


	}

	.store-pop-content {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		align-items: center;
		padding: 10px;
		padding-bottom: 20px;

		.title-row {
			display: flex;
			align-items: center;
			font-size: 22px;

			>text {
				margin-left: 10rpx;
			}
		}

		.num-row {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #e5e6eb;
			padding: 20rpx 0;
			width: 80%;
			font-size: 20px;
			align-items: center;

			.left {
				display: flex;
				align-items: center;

				>text {
					margin-left: 10rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;
				font-size: 20px;

				.unit-box {
					color: #333;
					padding: 5rpx;
					border-radius: 5px;
				}
			}
		}

		.btn-row {
			display: flex;
			width: 100%;
			justify-content: space-evenly;

			>button {
				padding: 0 60rpx;
				margin-top: 20rpx;
				background-color: #94bfff;
				color: #fff;
				font-size: 20px;
				line-height: 2;
			}
		}

	}
</style>